<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>经纬度查找</title>
<style type="text/css" media="screen">
<!--
html,body{height:100%;margin:0;font:12px/1.6em verdana arial;color: #555;}
#over{position: absolute; top:11px;left:10px;background: #fff;z-index:999;padding:10px;border: 1px solid #bbb;}
#map{width:100%;height:100%;margin:auto;}
h1{margin:4px 0 11px;font: bold 14px/1.6em verdana;color: #f60;border-bottom: 1px solid #ccc;}
h2{margin:8px 0 6px;text-align: center;font: bold 15px/1.6em verdana sans-serif;color: #669;text-transform:capitalize;}
#loc{width:150px;font-size:1em;padding:2px 3px 1px;;}
#out{padding:5px 3px 0;}
#posi{background: #fffbe2;border: 1px solid #ccc;width:150px;padding:2px 3px 1px;}
#ct{text-align: center;}
-->
</style>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZoLVN79WT2mXp8M7Dsi-hSVbq8cAqMDJReYWuWY3FAJPhxoRBTRhRCgpQhnPbuLwfaAbgqLte5Baw"></script>
<script type="text/javascript">
//<![CDATA[

window.onload  =function (){	load();	/*setupMap()*/	};
window.onunload=function (){	GUnload();	};

function load() {
  if (GBrowserIsCompatible()) {
	var el   =  document.getElementById("map");
	var map  =  new GMap2(el);
	var point=  new GLatLng(39.905556, 116.395833);
		map.setCenter(point, 6);
		map.addControl(new GMapTypeControl()); 
	var mapTypeControl = new GLargeMapControl();
	var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,40));
		map.addControl(mapTypeControl,topRight);

	var geocoder = new GClientGeocoder();
	
	document.getElementById("gbt").onclick = function(){
	  if (geocoder) {
	  var address = document.getElementById("loc").value;
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("不能解析: " + address);
            } else {
			  map.clearOverlays();
			  map.setCenter(point, 6);
              var marker = new GMarker(point);
              map.addOverlay(marker);
			  var point = point.toString();
			  var ple = point.length-1;
			  var ot = point.substring(1,ple)
		      marker.openInfoWindowHtml('<div id="ct"><h2>' + address + '</h2>经纬度： ' + ot + '</div>');
            }
          }
        );
      }
	}

	document.getElementById("loc").onfocus = function(){
		if(this.value=="请输入国家或者地名"){this.value="";}else this.select();
	}

	document.getElementById("loc").onblur = function() {
		if (this.value == "") { this.value = "请输入国家或者地名";}
	}

  }
}
//]]>
</script> 

</head>
<body>
	<div id="map"></div>
	<div id="over">
		<h1>国家/地名 经纬度查找</h1>
		<input type="text" size="20" id="loc" name="address" value="请输入国家或者地名" />
		<input type="submit" id="gbt" value="查询" />
	</div>
</body>
</html>